<template>
  <el-card>
      <!-- 搜索 -->
      <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
         <SearchItem label="关键词">
           <el-input v-model="searchForm.keyword" placeholder="用戶暱稱" clearable></el-input>
         </SearchItem>
     </Search>
 
     <!-- 新增|刷新 -->
    
     <ListHeader @create="handleCreate" @refresh="getData"/>

     <el-table :data="tableData"  v-loading="loading">
       <el-table-column prop="id" label="ID" />
       <el-table-column prop="username" label="用戶名" />
       <el-table-column  label="電話號碼" >+852</el-table-column>
       <el-table-column prop="mobile" label="電話號碼" />
       <el-table-column prop="email" label="郵箱" />
       <el-table-column prop="integral_ing" label="積分" />
       <el-table-column prop="wallet" label="餘額" />
       <el-table-column  label="是否禁用" >
        <template #default="{ row }">
          <el-switch :modelValue="row.status" :active-value="0" :inactive-value="1" :loading="row.statusLoading"
            @change="handleStatusChange($event, row)">
          </el-switch>
        </template>
       </el-table-column>
       <el-table-column prop="created_at" label="創建時間"  />
  
       <el-table-column label="操作" width="180" align="center">
         <template #default="scope">
          
             <el-button type="primary" size="small"  @click="handleEdit(scope.row)">修改</el-button>
 
           <el-popconfirm title="确定要删除？" confirmButtonText="確認" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                 <template #reference>
                     <el-button type="danger" size="small">删除</el-button>
                 </template>
             </el-popconfirm>
          
         </template>
       </el-table-column>
       
     </el-table>
 
     <div class="flex items-center justify-center mt-5">
         <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
     </div>
 
     <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
       <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
         <el-form-item label="用户名" prop="username">
           <el-input v-model="form.username" placeholder="用户名"></el-input>
         </el-form-item>
       
         <el-form-item label="積分" prop="integral_ing">
           <el-input type="number" v-model="form.integral_ing" placeholder="積分"></el-input>
         </el-form-item>
  
         <el-form-item label="郵箱" prop="integral_ing">
           <el-input  v-model="form.email" placeholder="郵箱"></el-input>
         </el-form-item>

         <el-form-item label="手機" prop="mobile">
           <el-input type="number" v-model="form.mobile" placeholder="手機"></el-input>
         </el-form-item>

         <el-form-item label="密碼" prop="password">
           <el-input type="password" v-model="form.password" placeholder="密碼"></el-input>
         </el-form-item>

         <el-form-item label="餘額" prop="integral_ing">
           <el-input type="number" v-model="form.wallet" placeholder="餘額"></el-input>
         </el-form-item>
       </el-form>
     </FormDrawer>
  </el-card>
 </template>
 
  <script setup>
 import { ref } from "vue"
 import ListHeader from "@/components/ListHeader.vue";
 import FormDrawer from "@/components/FormDrawer.vue";
 import Search from "@/components/Search.vue";
 import SearchItem from "@/components/SearchItem.vue";
 import { useInitTable,useInitForm } from '@/composables/useCommon.js'
 
 
 import {
  getmember,
   del,
   update,
   create
 } from "@/api/member.js"

 const {
   searchForm,
   resetSearchForm,
   tableData,
   loading,
   currentPage,
   total,
   limit,
   getData,
   handleDelete,
   
   handleStatusChange
 } = useInitTable({
   searchForm:{
     keyword:""
   },
   getList:getmember,
   delete:del,
   updateStatus: update
 })
 
 const {
   formDrawerRef,
   formRef,
   form,
   rules,
   drawerTitle,
   handleSubmit,
   handleCreate,
   handleEdit
 } = useInitForm({
   form:{
       username: "",
       integral_ing: "",
       passowrd:"",
       mobile:"",
       email:'',
       wallet:''
   },
   rules: {
    username: [{required: true,message: '用戶名稱不能為空',trigger: 'blur'}],
    mobile: [{required: true,message: '手機不能為空',trigger: 'blur'}],
    password: [{required: true,message: '密碼不能為空',trigger: 'blur'}],
    
  },
   getData,
   update:update,
   create:create
 })
 
 
 
 </script>
 
 